<template>
  <div class="main">
    <div class="ql-editor" v-html="details.mainText"></div>
  </div>
</template>

<script setup>
import { listNotice } from "@/config/api"
import { ref, onBeforeMount } from 'vue'
import router from "@/config/router"

const details = ref({})

onBeforeMount(() => {
    let {id, current} = router.currentRoute.value.query;
    listNotice({current,type:'cn'}).then(res => {
        for (let i = 0; i < res.records.length; i++) {
            const element = res.records[i];
            if(element.id == id){
                details.value = element
                console.log(element )
            }
        }
    })
})
</script>

<style lang="less" scoped>
.ql-editor{
    color: black;
   :deep img{
        max-width: 100%;
    }
  font-size: 0.19rem;
}
.main{
    min-height: 100vh;
    background: #fff;
        color: black;
}
</style>
<style lang="less">
p{
    line-height: 2;
}
.ql-size-12px {
  font-size: 0.35rem
}
.ql-size-14px {
  font-size: 0.37rem;
}
.ql-size-16px {
  font-size: 0.4rem;
}
.ql-size-18px {
  font-size: 0.43rem;
}
.ql-size-20px {
  font-size: 0.48rem;
}
.ql-size-22px {
  font-size: 0.51rem;
}
.ql-size-24px {
  font-size: 0.53rem;
}
.ql-size-26px {
  font-size: 0.56rem;
}
.ql-size-28px {
  font-size: 0.59rem;
}
.ql-size-30px {
  font-size: 0.61rem;
}
.ql-size-36px {
  font-size: 0.64rem;
}
.ql-size-42px {
  font-size: 0.67rem;
}
</style>
